<template>
	<!-- 列表样式 -->
	<view class="p-2">
		<!-- 头像昵称 | 关注按钮 -->
		<view class="flex align-center justify-between">
			<view class="flex align-center">
				<!-- 头像 -->
				<image class="rounded-circle mr-2" :src="item.userpic" @click="openSpace" style="width: 65rpx; height: 65rpx;" lazy-load=""></image>
				<!-- 昵称和发布时间 -->
				<view>
					<view class="font" style="line-height: 1.5;">{{item.username}}</view>
					<text class="font-sm text-light-muted" style="line-height: 1.5;">{{item.newstime}}</text>
				</view>
			</view>
			<!-- 按钮 -->
			<view @click="follow" v-if="!item.isFollow" class="flex align-center justify-center rounded bg-main text-white animated faster" style="width:90rpx;height: 50rpx;" hover-class="jello">关注</view>
		</view>
		<!-- 标题 -->
		<view class="font my-1" @click="openDetail">{{item.title}}</view>
		<!-- 图片 -->
		<image class="rounded w-100" @click="openDetail" v-if="item.titlepic" :src="item.titlepic" style="height: 350rpx;"></image>
		<!-- 图标按钮 -->
		<view class="flex" style="align-items: center;">
			<view class="flex flex-1 align-center justify-center animated faster" hover-class="jello text-main" @click="doSupport('support')">
				<text class="iconfont icon-dianzan2 mr-2"></text>
				<text>{{item.support.support_count}}</text>
			</view>
			<view class="flex flex-1 align-center justify-center animated faster" hover-class="jello text-main"@click="doSupport('unsupport')">
				<text class="iconfont icon-cai mr-2" ></text>
				<text>{{item.support.unsupport_count}}</text>
			</view>
			<view class="flex flex-1 align-center justify-center animated faster" hover-class="jello text-main" @click="openDetail">
				<text class="iconfont icon-pinglun2 mr-2"></text>
				<text>{{item.comment_count}}</text>
			</view>
			<view class="flex flex-1 align-center justify-center animated faster" hover-class="jello text-main" @click="openDetail">
				<text class="iconfont icon-fenxiang mr-2"></text>
				<text>{{item.share_num}}</text>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		props:{
			item:Object,
			index:Number
		},
		methods:{
			// 打开个人空间
			openSpace(){
				console.log('打开个人空间');
			},
			// 关注
			follow(){
				// console.log('关注');
				// 通知父组件
				this.$emit('follow', this.index)
			},
			// 进入详情页
			openDetail(){
				console.log('进入详情页');
			},
			// 顶踩操作
			doSupport(type){
				console.log('顶踩操作');
			},
			
		}
	}
</script>

<style>
</style>
